<template>
    <div class="setTimeLineEchart">
        <common-echart :data="data" type="pie" :form-list="formList"></common-echart>
        <el-form-item label="是否显示">
            <el-radio-group v-model="data.options.timeline.show">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="自动播放">
            <el-radio-group v-model="data.options.timeline.autoPlay">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="间隔时间">
            <el-input v-model="data.options.timeline.playInterval"><template slot="append">ms</template></el-input>
        </el-form-item>
        <el-form-item label="添加时间">
            <el-tag
                :key="tag"
                v-for="tag in data.options.timeline.data"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 时间</el-button>
        </el-form-item>
    </div>
</template>
<script>
import CommonEchart from './CommonEchart'
import {getEchartByType} from '@/api/api'
export default {
    name: 'SetTimeLineEchart',
    components: {
        CommonEchart
    },
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        },
        formList: {
           type: Array 
        }
    },
    data(){
        return {
            inputVisible: false,
            inputValue: ''
        }
    },

    methods: {
        handleClose(tag) {
            this.data.options.timeline.data.splice(this.data.options.timeline.data.indexOf(tag), 1);
            this.data.options.timeline.data = this.data.options.timeline.data.sort(function(a,b){return a-b})
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.data.options.timeline.data.push(inputValue);
                this.data.options.timeline.data = this.data.options.timeline.data.sort(function(a,b){return a-b})
            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    }
}
</script>
<style lang="scss" scoped>
    .setTimeLineEchart{
        .el-tag {
            margin-right: 5px;
        }
        .button-new-tag {
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            vertical-align: bottom;
        }
    }
    
</style>
